<template>
  <div class="person">
    <TestC :num="num" :data="data" @aaa="accept" bff="1234" ref="el_c"/>
    <div>{{ 'accept: ' + accept_val }}</div>
    <div>
      <button @click="changeNum">更改num</button>
      <button @click="changeData">更改data</button>
      <button @click="inputFocus">聚焦</button>
    </div>
  </div>
</template>

<script lang="ts" setup name="PropsEmit">
import { provide, ref } from 'vue'
import TestC from '@/components/study/TestC.vue'

let num = ref(0);
let data = ref({
  name: '张三',
  age: 18
})
const changeNum = () => {
  num.value ++;
}
const changeData = () => {
  data.value.name = 'zhang-san';
  data.value.age ++;
  title.value = 'PropsEmit666'
}
const accept_val = ref(0)
const accept = (val: number) => {
  accept_val.value = val
}
const el_c = ref<InstanceType<typeof TestC> | null>(null);
function inputFocus() {
  el_c.value?.focus();
  console.log('inputFocus', el_c.value?.title)
}

const title = ref('PropsEmit')
provide('title', title);

</script>